<template>
  <div class="NAVV">
    <van-pull-refresh v-model="Loading" @refresh="onRefresh">
      <van-row gutter="20">
        <van-col span="15"
          ><van-dropdown-menu>
            <van-dropdown-item v-model="value3" :options="option3" />
            <van-dropdown-item v-model="value4" :options="option4" />
          </van-dropdown-menu>
        </van-col>
        <van-col>
          <van-collapse v-model="showDetails">
            <van-collapse-item title="加减分说明">
              <p>
                1、任务成绩反馈数量10个内加1分，10~30个加2分，<br />30个以上加3分；<br />
                2、有效反馈（反馈后评分者修正）1~3个加1分，<br />每增加3个加1分，10分封顶；<br />
                3、期末作品评分投票数1~6个加1分，<br />每增加6个加1分，10分封顶；<br />
                4、课程问答的有效提问数量1~5个加1分，<br />每增加5个加1分，10分封顶；<br />
                5、课程问答的有效回复数1~5个加1分，<br />每增加5个加1分，10分封顶；<br />
                6、学生助教表现优秀加15分，合格加10分，不合格0分，<br />严重不合格减5分；<br />
                7、旷课每2次减1分； <br />
                8、错误反馈1~3个减1分，每3个减1分；
              </p>
            </van-collapse-item>
          </van-collapse>
        </van-col>

        <van-col span="24">
          <van-search v-model="value" placeholder="搜索" />
        </van-col>

        <div>
          <van-col span="20">
            <p class="stu">测试学生1 2200113 22软件1班</p>
            <p class="sta">任务分:0分 , 课堂分:0分 ,总评:0分</p>
          </van-col>
        </div>

        <van-col span="25"
          ><van-collapse v-model="show">
            <van-collapse-item title="加分:10分">
              <p>课程助教表现合格，加10分；</p>
            </van-collapse-item>
          </van-collapse></van-col
        >
      </van-row>

      <van-col span="25"
        ><van-collapse v-model="showstu1">
          <van-collapse-item title="学生1">
            <p>任务分:10分 , 课堂分:10分,总评:20分</p>
          </van-collapse-item>
        </van-collapse></van-col
      >
      <van-col span="25"
        ><van-collapse v-model="showstu2">
          <van-collapse-item title="学生2">
            <p>任务分:10分 , 课堂分:10分,总评:20分</p>
          </van-collapse-item>
        </van-collapse></van-col
      >
      <van-col span="25"
        ><van-collapse v-model="showstu3">
          <van-collapse-item title="学生3">
            <p>任务分:10分 , 课堂分:10分,总评:20分</p>
          </van-collapse-item>
        </van-collapse></van-col
      >
      <van-col span="25"
        ><van-collapse v-model="showstu4">
          <van-collapse-item title="学生4">
            <p>任务分:10分 , 课堂分:10分,总评:20分</p>
          </van-collapse-item>
        </van-collapse></van-col
      >
      <van-col span="25"
        ><van-collapse v-model="showstu5">
          <van-collapse-item title="学生5">
            <p>任务分:10分 , 课堂分:10分,总评:20分</p>
          </van-collapse-item>
        </van-collapse></van-col
      >
      <van-col span="25"
        ><van-collapse v-model="showstu6">
          <van-collapse-item title="学生6">
            <p>任务分:10分 , 课堂分:10分,总评:20分</p>
          </van-collapse-item>
        </van-collapse></van-col
      >
      <van-col span="25"
        ><van-collapse v-model="showstu7">
          <van-collapse-item title="学生7">
            <p>任务分:10分 , 课堂分:10分,总评:20分</p>
          </van-collapse-item>
        </van-collapse></van-col
      >
      <van-col span="25"
        ><van-collapse v-model="showstu8">
          <van-collapse-item title="学生8">
            <p>任务分:10分 , 课堂分:10分,总评:20分</p>
          </van-collapse-item>
        </van-collapse></van-col
      >
    </van-pull-refresh>
  </div>

  <div class="paggg">
    <van-pagination
      v-model="currentPage"
      :total-items="24"
      :items-per-page="5"
    />
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";

const router = useRouter();
const count = ref(0);
const Loading = ref(false);
const Nofinsh = ref(true);
const showDetails = ref([]);
const show = ref([]);
const showstu1 = ref([]);
const showstu2 = ref([]);
const showstu3 = ref([]);
const showstu4 = ref([]);
const showstu5 = ref([]);
const showstu6 = ref([]);
const showstu7 = ref([]);
const showstu8 = ref([]);

const toggleCollapse = () => {
  showDetails.value = showDetails.value.length ? [] : ["1"];
};

const value = ref("");
const value3 = ref(0);
const value4 = ref("0");
const option3 = [
  { text: "前端框架应用项目开发", value: 0 },
  { text: "专业技能综合实践", value: 1 },
  { text: "经销存系统设计与实现", value: 2 },
  { text: "后端技术与项目开发", value: 3 },
  { text: "软件测试技术", value: 4 },
];

const option4 = [
  { text: "刷题", value: "0" },
  { text: "作品", value: "1" },
];

const onRefresh = () => {
  setTimeout(() => {
    Loading.value = false;
    count.value++;
    Nofinsh.value = true;
  }, 1000);
};

const currentPage = ref(1);
</script>
<style>
.stu {
  color: green;
}
.person {
  color: black;
  font-size: large;
}
.sta {
  display: flex;
  color: red;
}
</style>
